<template>
  <div class="login">
      <!-- 标题开始 -->
      <div class="header">
        <div class="title">易洁家政</div>
        <div class="title_bottom"> 员工端 </div>
      </div>
      <!-- 标题结束 -->
      <!-- 登录框开始 -->
      <div class="loginArea">
         <div class="loginForm">
            <div class="form">
                <!-- {{form}} -->
                <van-form @submit="onSubmit">
                  <van-field
                      v-model="form.username"
                      name="用户名"
                      label="用户名"
                      placeholder="用户名"
                      :rules="[{ required: true, message: '请填写用户名' }]"
                  />
                  <van-field
                      v-model="form.password"
                      type="password"
                      name="密码"
                      label="密码"
                      placeholder="密码"
                      :rules="[{ required: true, message: '请填写密码' }]"
                  />
                  <div style="margin: 16px;">
                      <van-button round block type="info" native-type="submit" @click="onSubmit"
                      style="letter-spacing:0.5em; color:white; 
                      background: rgba(0, 0, 0, 0) linear-gradient(to right, rgb(94, 231, 223), rgb(180, 144, 202)) repeat scroll 0% 0%; 
                      border: 0px none;">登录</van-button>
                  </div>
                  <div class="signUp">
                    <span>没有账号？点击注册</span>
                  </div>
                  </van-form>
            </div>
        </div>
      </div>
      <!-- 登录框结束 -->
  </div>
</template>

<script>
import {post_json} from '@/http/axios.js'
export default {
    data() {
        return {
            form: {
                username:'admin1',
                password:'123321',
            }
        }
    },
    methods:{
        onSubmit(){
            //异步操作
            post_json('user/login',this.form).then((res)=>{
                if(res.data.status ==200){
                    //将token存储起来
                    localStorage.setItem('token',res.data.data.token);
                    //跳转页面，跳转到首页
                    this.$router.push({ path:'/manager/home'})
                }
            })
        }
    }
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 915.2px;
  background-image: linear-gradient(#5ee7df,#b490ca);
  overflow: hidden;
}
.login .header {
  width: 100%;
  position: absolute;
  text-align: center;
  top: 120px;
}
.login .header .title {
  font-family: webfont;
  font-size: 40px;
  color: #fff;
}
.login .header .title_bottom{
  color: #fff;
  font-family: webfont;
  font-size: 20px;
}
.login .loginArea{
  box-shadow: 0 4px 8px 0 hsla(0,0%,100%,.2);
  background-color: #fff;
  transition: .3s;
  width: 90%;
  border-radius: 5px;
  margin: 265px auto;
  height: 250px;
  padding: 10px;
}
.login .loginForm{
  padding-top: 20px;
}
.login .loginForm .form .signUp{
  color: #4e95f7;
  text-align: center;
  font-size: 12px;
  letter-spacing: .05em;
  cursor: pointer;
}


</style>